<!DOCTYPE html>
<html lang="en">
<head>
<title>T9 - Div T5</title>
<style>
h1 {
text-align: center;
font-size: 45px;
}
#outer {
height: 1000px;
width: 1000px;
border: 1px solid;
margin: 0 auto;
}
#r1 {
height: 100px;
width: 1000px;
}
#r1_col1 {
float: left;
height: 100px;
width: 150px;
background-color: red;
}
#r1_col2 {
float: left;
height: 100px;
width: 700px;
background-color: rgb(219, 96, 117);
}
#r1_col3 {
float: left;
height: 100px;
width: 150px;
background-color: red;
}
#r2 {
height: 250px;
width: 1000px;
background-color: aqua;
}
#r2_col1 {
float: left;
height: 250px;
width: 500px;
background-color: palevioletred;
}
#r2_col2 {
float: right;
height: 250px;
width: 500px;
}
#r2_col2_r1 {
height: 125px;
width: 500px;
background-color: blue;
}
#r2_col2_r2 {
height: 125px;
width: 500px;
}
#r2_col2_r2_col1 {
float: left;
height: 125px;
width: 250px;
background-color: purple;
}
#r2_col2_r2_col2 {
float: right;
height: 125px;
width: 250px;
background-color: skyblue;
}
#r3 {
height: 250px;
width: 1000px;
}
#r3_col1 {
float: left;
height: 250px;
width: 500px;
background-color: skyblue;
}
#r3_col2 {
float: right;
height: 250px;
width: 500px;
background-color: pink;
}
#r4 {
height: 400px;
width: 1000px;
background-color: beige;
}
#r4_col1 {
height: 400px;
width: 500px;
float: left;
}
#r4_col1_r1 {
height: 200px;
width: 500px;
background-color: rgb(56, 56, 179);
}
#r4_col1_r2 {
height: 200px;
width: 500px;
background-color: rgb(16, 16, 145);
}
#r4_col2 {
height: 400px;
width: 500px;
float: right;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Task - 9 | Div Task - 5</h1>
<div id="outer">
<div id="r1">
<div id="r1_col1"></div>
<div id="r1_col2"></div>
<div id="r1_col3"></div>
</div>
<div id="r2">
<div id="r2_col1"></div>
<div id="r2_col2">
<div id="r2_col2_r1"></div>
<div id="r2_col2_r2">
<div id="r2_col2_r2_col1"></div>
<div id="r2_col2_r2_col2"></div>
</div>
</div>
</div>
<div id="r3">
<div id="r3_col1"></div>
<div id="r3_col2"></div>
</div>
<div id="r4">
<div id="r4_col1">
<div id="r4_col1_r1"></div>
<div id="r4_col1_r2"></div>
</div>
<div id="r4_col2"></div>
</div>
</div>
</body>
</html>